<template>
	<view class="spread flex items-center justify-center" :class="{'box-spread': showFlag}">
		<template v-if="isAch != 1">
			<image src="@/static/tarot-bg.png" mode="widthFix"></image>
		</template>
		<template v-else>
			<template v-for="item,idx in cardList" :key="idx">
				<image :src="item.tarot.front" mode="widthFix" v-if="item.dir == 0"></image>
				<image :src="item.tarot.back" mode="widthFix" v-else></image>
			</template>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 40rpx 0;
	}

	.spread image {
		width: 80rpx;
	}
</style>